<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <link rel="stylesheet" type="text/css" href="css/index/topHeader.css" />

    <link rel="stylesheet" type="text/css" href="css/detail/detail.css" />
    <link rel="stylesheet" type="text/css" href="css/detail/comments.css" />
    <link rel="stylesheet" type="text/css" href="css/detail/middleBar.css" />
    <link rel="stylesheet" type="text/css" href="./libs/JqueryShare/share.min.css" />

    <!-- 分页css -->
    <link href="libs/vuePaging/VuePaging/zpageNav.css" rel="stylesheet" />

    <style type="text/css">
        .social-share .social-share-icon {
            width: 32px;
            height: 32px;
            line-height: 32px;
        }
    </style>

    <link rel="shortcut icon" href="img/kai-toutiao.ico" />

    <title id="pageTitle">[此处显示文章title]</title>
</head>

<body>
<div id="detailContainer">
    <!-- 顶部导航头 header -->
    <div class="white-header">
        <div class="white-bar">
            <div class="left-part">
                <div class="logo-wrapper" @click="goIndex()">
                    <img src="./img/kai-news-logo.png" class="big-logo"/>
                </div>

                <div class="menus">
                    <!-- single-selected -->
                    <div class="single-default" v-bind:class="{'single-selected': (cat.id==selectedCatId)}" v-for="(cat, index) in catList" v-key="index">
                        <!-- menu-selected -->
                        <a href="javascript:void(0);" class="white-header-left" style="text-decoration:none;" v-bind:class="{'menu-selected': (cat.id==selectedCatId)}" @click="queryByCategory(cat.id)">{{cat.name}}</a>
                    </div>
                    <div class="single-default">
                        <a href="https://class.imooc.com/sale/javaarchitect" target="_blank" class="white-header-left">架构师</a>
                    </div>
                </div>
            </div>

            <div class="right-part">
                <!-- 如果登录则不显示 -->
                <block v-if="userInfo == null">
                    <a href="javascript:(0);" @click="doLogin()" target="_blank" class="white-header-right-start">登录 | 注册</a>
                </block>
                <a href="javascript:(0);" @click="goWriterCenter()" target="_blank" class="white-header-right">作家中心</a>
                <a href="javascript:(0);" @click="goAdminCenter()" target="_blank" class="white-header-right" style="margin-right: 20px;">管理平台</a>
            </div>
        </div>
    </div>

    <!-- 中间主体部分 -->
    <div class="container">

        <div class="big-title" v-bind:class="{'big-title-bottom': (articleDetail.readCounts == '' || articleDetail.readCounts == null)}">
            {{articleDetail.title}}
        </div>
        <div class="read-counts" v-show="articleDetail.readCounts != '' && articleDetail.readCounts != null">
            阅读量：{{articleDetail.readCounts}}
        </div>

        <div class="detail-really">

            <!-- 左侧分享 -->
            <div class="left-social">

                <div class="date-title">
                    <span class="year">{{formatDataYear(articleDetail.publishTime)}}</span>
                </div>
                <div class="back-year-line"></div>

                <div class="date-md">{{formatDataMonthDay(articleDetail.publishTime)}}</div>

                <div class="date-times">{{formatDataTime(articleDetail.publishTime)}}</div>

                <div class="writer-name" @click="showWriter(articleDetail.publishUserId)">
                    {{articleDetail.publishUserName}}
                </div>

                <div class="imooc-words">
                    <span class="hlk-num">凯哥媒体号</span>
                </div>

                <div class="share-title">
                    <span class="share-words">分享</span>
                </div>
                <div class="back-line"></div>

                <div class="social-line" @click="shareWeiBo">
                    <img src="./img/social/weibo.png" class="social-pic"/>
                    <span class="social-words">微博</span>
                </div>
                <div class="social-line" @click="shareDouBan">
                    <img src="./img/social/douban.png" class="social-pic"/>
                    <span class="social-words" >豆瓣</span>
                </div>
                <div class="social-line" @click="shareQQ">
                    <img src="./img/social/qq.png" class="social-pic"/>
                    <span class="social-words">QQ</span>
                </div>
                <div class="social-line" @click="shareQZone">
                    <img src="./img/social/qzone.png" class="social-pic"/>
                    <span class="social-words">QQ空间</span>
                </div>
                <div class="social-line" @click="shareWeChat">
                    <div class="social-share" data-wechat-qrcode-title="请打开微信扫一扫"
                         data-disabled="google,twitter,facebook,douban,qzone,qq,weibo,tencent,linkedin,diandian" >
                        <!-- <img src="./img/social/wechat.png" class="social-pic"/> -->
                        <!-- <span class="social-words">微信</span> -->
                    </div>
                    <span class="social-words">微信</span>
                </div>
            </div>

            <!-- 中间文章主体 -->
            <div class="container-middle">
                <div class="article-wrapper">

                    <div class="content" v-html="articleDetail.content">
                    </div>

                    <div class="declare">
                        免责声明：本平台所有内容仅供测试，且文章来自互联网，不代表凯哥新闻的观点和立场，如有不妥，请联系后删除。
                    </div>
                </div>

                <div class="comments-wrapper">

                    <div class="comments-words">
                        <div class="comments-words-left">
                            <div class="comments-big">留言评论</div>
                            <div class="comments-warn">文明上网理性发言</div>
                        </div>

                        <!-- <div class="comments-counts">{{articleDetail.commentCounts}}条评论</div> -->
                        <div class="comments-counts">{{commentCounts}}条评论</div>

                    </div>

                    <div id="summernote" class="summernote"></div>
                    <div class="say-sth-wrapper">
                        <button class="say-sth" @click="doComment(0)">发表评论</button>
                    </div>

                    <div class="all-comments-wrapper">
                        <div class="all-comments">所有评论</div>
                    </div>

                    <div class="all-comments-list-wrapper">

                        <div class="all-comments-list" v-for="(comment,index) in commentList" :key="index">
                            <div class="single-comment-wrapper">
                                <!-- <img src="./img/face1.png" class="user-face"/> -->
                                <img :src="comment.commentUserFace" class="user-face"/>
                            </div>

                            <div class="comment-info-wrapper">
                                <div class="publish-info">
                                    <div>{{comment.commentUserNickname}}</div>
                                    <div class="publish-date">{{formatData(comment.createTime)}}</div>
                                </div>

                                <!-- 回复的内容，如果判断是回复别人的留言，则再此引用一下 -->
                                <div class="quote-wrapper" v-show="comment.quoteUserNickname != null">
                                        <span class="quote-content">
                                            <!-- <span>回复“</span> -->
                                            <span><strong>{{comment.quoteUserNickname}}</strong>：</span><span v-html="comment.quoteContent"></span>
                                            <!-- <span>”</span> -->
                                        </span>
                                </div>

                                <div class="blank-wrapper" v-show="comment.quoteUserNickname == null">
                                </div>

                                <div class="publish-content" v-html="comment.content">
                                </div>

                                <div class="reply-wrapper" @click="doReply(comment.commentId)">
                                    <img class="icon-reply"/>
                                    <!-- src="./img/icon-reply.png"  -->
                                    <div class="reply-words">回复</div>
                                </div>

                                <!-- nowReplyingFatherCommentId: 根据当前用户正在回复的父commentId进行页面的留言看展示或隐藏 -->
                                <div class="reply-content-wrapper" v-show="nowReplyingFatherCommentId==comment.commentId">
                                    <textarea :id="'reply-to-' + comment.commentId" class="reply-content"></textarea>
                                    <button class="reply-btn" @click="replyToComment(comment.commentId)">回复</button>
                                </div>
                            </div>
                        </div>

                        <!-- 分页 start-->
                        <div class="wrap" id="wrap">
                            <zpagenav v-bind:page="page" v-bind:page-size="pageSize" v-bind:total="total"
                                      v-bind:max-page="maxPage"  v-on:pagehandler="doPaging">
                            </zpagenav>
                        </div>
                        <!-- 分页 end-->

                    </div>
                </div>
            </div>

            <div class="blank-right"></div>
        </div>
    </div>
</div>
<script src="libs/vue.min.js"></script>
<script src="libs/axios.min.js"></script>
<!-- <script src="libs/jquery-1.7.2.min.js"></script> -->

<!-- <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote.min.js"></script> -->

<link href="./libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="./libs/jquery-3.4.1.min.js"></script>
<script src="./libs/bootstrap/js/bootstrap.min.js"></script>
<link href="./libs/summernote/dist/summernote.css" rel="stylesheet">
<script src="./libs/summernote/dist/summernote.js"></script>

<!-- 中文汉化 -->
<script src="libs/summernote/lang/summernote-zh-CN.js"></script>
<!-- vue 分页 -->
<script src="libs/vuePaging/VuePaging/zpageNav.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="./libs/JqueryShare/jquery.share.min.js"></script>
<script src="libs/moment-with-locales.min.js"></script>

<script type="text/javascript">

    var articleList = new Vue({
        el: "#detailContainer",
        data: {
            nowReplyingFatherCommentId: 0,  // 根据当前用户正在回复的父commentId进行页面的留言看展示或隐藏
            userInfo: null,

            articleId: "",
            articleDetail: {},

            // 文章分类列表
            catList: [],
            selectedCatId: "",		// 被选中的当前的分类id
            // isSelected = (cat.id==selectedCatId)

            commentList: [],    // 评论列表
            commentCounts: 0,

            page: 1, // 分页页数
            pageSize: 10, // 分页每页显示数量
            maxPage: 1, // 总页数
            total: 1, // 总记录数
        },
        created() {
            var me = this;
            // 通过cookie判断用户是否登录
            app.judgeUserLoginStatus(me);

            // 查询文章详情
            var articleId = app.getUrlParam("articleId");
            // console.log(articleId);
            this.articleId = articleId;
            this.getArticleDetail(articleId);

            // 获得分类
            this.getAllCategory();
            // 文章阅读数累加
            this.readArticle(articleId);

            // 获得文章的评论列表
            this.getAllComments(1, 10);
            // 获得文章评论数
            this.getCommentCounts();
        },
        mounted() {
            // 初始化编辑器
            $('#summernote').summernote({
                placeholder: '随便说几句吧...',
                lang: 'zh-CN',
                height: 200,
                width: 700,
                border: 0,
                // disableDragAndDrop: true, // 禁止文件拖放
                toolbar: [
                ],
                // 回调函数
                callbacks: {
                    // summernote 初始化
                    onInit: function() {
                        $(".panel").css({"margin-bottom": "10px"});
                    }
                }
            });
        },
        methods: {
            // 文章阅读数累加
            readArticle(articleId) {
                var me = this;

                var articleServerUrl = app.articleServerUrl;
                axios.defaults.withCredentials = true;
                axios.post(articleServerUrl + "/portal/article/readArticle?articleId=" + articleId)
                    .then(res => {
                        // console.log(JSON.stringify(res.data));

                        if (res.data.status == 200) {

                        } else {
                            console.log(res.data.msg);
                        }
                    });
            },
            // 跳转作家页面
            showWriter(writerId) {
                window.open("writer.html?writerId=" + writerId);
            },
            // 查询文章详情
            getArticleDetail(articleId) {
                var me = this;

                var articleServerUrl = app.articleServerUrl;
                axios.defaults.withCredentials = true;
                axios.get(articleServerUrl + "/portal/article/detail?articleId=" + articleId)
                    .then(res => {
                        // console.log(JSON.stringify(res.data));

                        if (res.data.status == 200) {
                            var result = res.data.data;
                            me.articleDetail = result;
                            console.log(JSON.stringify(me.articleDetail));

                            $("#pageTitle").html(result.title);
                        } else {
                            alert(res.data.msg);
                        }
                    });
            },

            // 获得文章评论数
            getCommentCounts() {
                var me = this;
                var articleServerUrl = app.articleServerUrl;
                axios.defaults.withCredentials = true;
                axios.get(articleServerUrl + "/comment/counts?articleId=" + me.articleId)
                    .then(res => {
                        console.log(JSON.stringify(res.data));

                        if (res.data.status == 200) {
                            var commentCounts = res.data.data;
                            me.commentCounts = commentCounts;
                        } else {
                            console.log(res.data.msg);
                        }
                    });
            },

            // 获得文章的评论列表
            getAllComments(page, pageSize) {
                var me = this;
                var articleServerUrl = app.articleServerUrl;
                axios.defaults.withCredentials = true;
                axios.get(articleServerUrl + "/comment/list?articleId=" + me.articleId +
                    "&page=" + page +
                    "&pageSize=" + pageSize)
                    .then(res => {
                        console.log(JSON.stringify(res.data));

                        if (res.data.status == 200) {
                            var grid = res.data.data;
                            var commentList = grid.rows;
                            me.commentList = commentList;

                            me.page = grid.page;  // 当前页数累加1，用于后续页面滚动分页
                            var maxPage = grid.total; // 获得总页数
                            var total = grid.records; // 获得总记录数

                            this.maxPage = maxPage;
                            this.total = total;

                        } else {
                            console.log(res.data.msg);
                        }
                    });
            },

            // 点击回复出现回复框
            doReply(fatherCommentId) {
                // 如果用户点击的当前的评论回复id和nowReplyingFatherCommentId一致，则隐藏，如果不一致，则显示
                if (fatherCommentId == this.nowReplyingFatherCommentId) {
                    this.nowReplyingFatherCommentId = 0;
                } else {
                    this.nowReplyingFatherCommentId = fatherCommentId;
                }
            },

            // 用户留言或回复
            doComment(fatherCommentId) {
                console.log(fatherCommentId);
                var articleContent = $('#summernote').summernote('code');
                this.commentDisplay(fatherCommentId, articleContent);
            },
            // 调用后端，留言保存
            commentDisplay(fatherCommentId, articleContent) {

                var me = this;
                var utoken = app.getCookie("utoken");
                var uid = app.getCookie("uid");

                var commentReplyBO = {
                    articleId: me.articleId,
                    fatherId: fatherCommentId,
                    commentUserId: uid,
                    content: articleContent
                };

                var articleServerUrl = app.articleServerUrl;
                axios.defaults.withCredentials = true;
                axios.post(articleServerUrl + '/comment/createComment',
                    commentReplyBO,
                    {
                        headers: {
                            'headerUserId': uid,
                            'headerUserToken': utoken
                        }
                    }
                )
                    .then(res => {
                        console.log(JSON.stringify(res.data));

                        if (res.data.status == 200) {
                            // 清空评论框中内容
                            $('#summernote').summernote('reset');
                            $("#reply-to-" + fatherCommentId).val("");

                            // 重新查询评论与评论数
                            me.getAllComments(1, 10);
                            me.getCommentCounts();
                        } else {
                            // alert(res.data.msg);
                            alert(JSON.stringify(res.data.data));
                        }
                    });
            },
            // 用户回复其他用户的评论，点击后保存到后端
            replyToComment(fatherCommentId) {
                // TODO: 通过循环的评论id，根据id获得后再拿到回复的内容
                // console.log(fatherCommentId);

                var content = $("#reply-to-" + fatherCommentId).val();

                // console.log(content);
                this.commentDisplay(fatherCommentId, content);
            },

            // 获得所有文章领域
            getAllCategory() {
                var me = this;
                var adminServerUrl = app.adminServerUrl;
                axios.defaults.withCredentials = true;
                axios.get(adminServerUrl + "/categoryMng/getCats")
                    .then(res => {
                        console.log(JSON.stringify(res.data));

                        if (res.data.status == 200) {
                            var catList = res.data.data;
                            me.catList = catList;
                            // console.log(catList);
                        } else {
                            alert(res.data.msg);
                        }
                    });
            },
            // 根据分类Id获得tag颜色
            getCatTagColor(catId) {
                var catList = this.catList;
                for (var i = 0 ; i < catList.length ; i ++) {
                    if (catId == catList[i].id) {
                        return catList[i].tagColor;
                        break;
                    }
                }
            },
            // 根据分类Id获得名称
            getCatName(catId) {
                var catList = this.catList;
                for (var i = 0 ; i < catList.length ; i ++) {
                    if (catId == catList[i].id) {
                        return catList[i].name;
                        break;
                    }
                }
            },
            // 格式化日期
            formatData(times) {
                var date = moment(times).format('YYYY-MM-DD hh:mm:ss');
                return date;
            },
            formatDataYear(times) {
                var date = moment(times).format('YYYY');
                return date;
            },
            formatDataMonthDay(times) {
                var date = moment(times).format('MM/DD');
                return date;
            },
            formatDataTime(times) {
                var date = moment(times).format('hh:mm:ss');
                return date;
            },

            // 分页实现方法 跳转到page页
            doPaging: function (page) {
                this.page = page;
                this.getAllComments(page, this.pageSize);
            },
            // 跳转登录
            doLogin() {
                window.location = app.writerLoginUrl;
            },
            goWriterCenter() {
                window.open(app.writerIndexUrl);
            },
            goAdminCenter() {
                window.open(app.adminCenterUrl);
            },
            // 以下都是社交分享
            shareWeiBo() {
                var weiBoShareUrl = 'http://v.t.sina.com.cn/share/share.php';
                weiBoShareUrl += '?url='+ encodeURIComponent(document.location);    //参数url设置分享的内容链接|默认当前页location，可选参数
                weiBoShareUrl += '&title=' + encodeURIComponent(document.title);    //参数title设置分享的标题|默认当前页标题，可选参数
                weiBoShareUrl += '&source=' + encodeURIComponent('');
                weiBoShareUrl += '&sourceUrl=' + encodeURIComponent('');
                weiBoShareUrl += '&content=' + 'utf-8';                             //参数content设置页面编码gb2312|utf-8，可选参数
                weiBoShareUrl += '&pic=' + encodeURIComponent('');                  //参数pic设置图片链接|默认为空，可选参数
                window.open(weiBoShareUrl, '_blank');
            },
            shareDouBan() {
                var douBanShareUrl = 'http://shuo.douban.com/!service/share?';
                douBanShareUrl += 'href=' + encodeURIComponent(location.href);      //分享的链接
                douBanShareUrl += '&name=' + encodeURIComponent(document.title);    //分享的标题
                window.open(douBanShareUrl, '_blank');
            },
            shareQQ() {
                var qqShareUrl = 'https://connect.qq.com/widget/shareqq/iframe_index.html?';
                qqShareUrl += 'url=' + encodeURIComponent(location.href);           //分享的链接
                qqShareUrl += '&title=' + encodeURIComponent(document.title);       //分享的标题
                window.open(qqShareUrl, '_blank');
            },
            shareQZone() {
                var qzoneShareUrl = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?';
                qzoneShareUrl += 'url=' + encodeURIComponent(document.location);    // 参数url设置分享的内容链接|默认当前页location
                qzoneShareUrl += '&title=' + encodeURIComponent(document.title);    // 参数title设置分享标题，可选参数
                window.open(qzoneShareUrl, '_blank');
            },
            shareWeChat2() {
                var target_url = 'http://zixuephp.net/inc/qrcode_img.php?url=' + document.location.href;
                target_url = 'http://zixuephp.net/inc/qrcode_img.php?url=http://www.itzixi.com';
                window.open(target_url, 'weixin', 'height=320, width=320');
            },
            shareWeChat() {
            },
            // 前往首页
            goIndex() {
                window.location = app.portalIndexUrl;
            }
        },

    });
</script>
</body>

</html>
